<template>
	<div class="padding-container preview-wrap">
    <div class="title-part">
      <el-button type="primary" size="mini" class="pull-right" @click="searchAction(true)">{{ $root.lang.control.device.detail.refresh }}</el-button>
    </div>
		<!-- <el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.device.detail.log.reportName">
        <el-select v-model="tableParams.code" :placeholder="$root.lang.control.device.detail.log.select" clearable>
          <el-option
            v-for="item in reportType"
            :key="item.key"
            :label="item.title"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="table-search" :label="$root.lang.control.device.detail.log.createTime">
        <el-date-picker
          v-model="tableParams.time"
          type="datetimerange"
          :range-separator="$root.lang.control.device.list.to"
          :start-placeholder="$root.lang.control.device.detail.log.startTime"
          :end-placeholder="$root.lang.control.device.detail.log.endTime"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item> 
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()">{{ $root.lang.control.device.detail.log.query }}</el-button>
        <el-button size="small" @click="searchAction(true)">{{ $root.lang.control.device.detail.log.empty }}</el-button>
      </el-form-item>
    </el-form> -->
    <el-table
      v-loading="listLoading"
      :data="logList"
      :empty-text="$root.lang.control.device.list.noData"
      size="small"
      border
      style="width: 100%"
      >
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.log.title">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="batch != 1"
        :label="$root.lang.control.device.detail.log.appIdentification">
        <template slot-scope="scope">
          <span>{{ scope.row.appIdentification | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="batch != 1"
        :label="$root.lang.control.device.detail.log.appV">
        <template slot-scope="scope">
          <span>{{ scope.row.appV | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="batch == 1"
        :label="$root.lang.control.device.detail.log.deviceCount">
        <template slot-scope="scope">
          <span>{{ scope.row.count | dataFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.device.detail.log.operTime">
        <template slot-scope="scope">
          <span>{{ scope.row.operTime | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column 
        fixed="right"
        width="220"
        align="center"
        v-if="batch == 1"
        :label="$root.lang.control.device.list.operate">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="toDetail(scope.$index, scope.row)">{{ $root.lang.control.device.list.look }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>

    <OperateLogDetail :show="showLogDetail" :uuid="uuid" @editReceive="getReceive" @reload="reloadTable" />

	</div>
</template>

<script>
import '@/options/reportType'
import OperateLogDetail from './operateLogDetail'
export default {
	name: 'OperateLog',
  components: {
    OperateLogDetail
  },
  props: {
    deviceId: {
      type: String,
      default: ''
    },
    batch: {
      type: String,
      default: ''
    }
  },
  watch: {
  },
	data() {
		return {
			listLoading: false,
			tableParams:{
				pageNum: 1,
				pageSize: 10,
        deviceId: this.deviceId
			},
      tableTotal: 0,
      logList: null,
      reportType: {},
      showLogDetail: false,
      uuid: null
		}
	},
  methods: {
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.reportType = enReportType
      } else {
        this.reportType = reportType
      }
    },
    sizeChange(val) {
      this.tableParams.pageNum = 1
      this.tableParams.pageSize = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.pageNum = val
      this.fetchData()
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          pageNum: 1,
          pageSize: 10,
          deviceId: this.deviceId
        }
      } else {
        this.tableParams.pageNum = 1
      }
      this.fetchData()
    },
    fetchData() {
      let url
      // 企业用户查看所有日志
      if(this.batch == 1) {
        url = '/log/oper/page/batch'
      } else {
        url = '/log/oper/page'
      }
      this.listLoading = true
      this.request({
          url: url,
          method: 'post',
          data: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.logList = response.rows
          this.tableTotal = response.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          this.logList = []
      })
    },
    toDetail(index, row) {
      this.showLogDetail = true
      this.uuid = row.uuid
    },
    getReceive(data) {
      this[data.key] = data.value
    },
    reloadTable() {
      this.fetchData()
    },
  },
  created() {
    this.checkLang()
    this.fetchData()
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size:16px;
			padding-bottom:30px;
		}
	}
</style>